<template>
    <div class="author-avatar-title">
        <el-popover placement="right" width="300" trigger="hover">
            <template #reference>
                <el-avatar :size="30" :src="authorAvatar"></el-avatar>
            </template>
            <div class="author-info-header">
                <el-avatar :size="60" :src="authorAvatar" shape="square"></el-avatar>
                <div class="author-info-body">
                    <span class="author-info-body-item">{{ author }}</span>
                    <span class="author-info-body-item1">社区排名: {{ authorRank }}</span>
                    <!-- <el-tag size="mini" type="warning" v-if="isPlus">Plus</el-tag> -->
                </div>
                <div class="author-info-body">
                    <span class="author-info-body-item1"><i class="el-icon-location"></i>{{ authorIp }}</span>
                    <span class="author-info-body-item1">{{ additionalInfo }}</span>
                </div>
            </div>
            <div class="author-info-footer">
                <div class="author-info-item">
                    <span class="author-info-item-label">{{ likesCount }}</span>
                    <span class="author-info-item-label">被点赞</span>
                </div>
                <div class="author-info-item">
                    <span class="author-info-item-label">{{ readsCount }}</span>
                    <span class="author-info-item-label">被阅读</span>
                </div>
                <div class="author-info-item">
                    <span class="author-info-item-label">{{ collectionsCount }}</span>
                    <span class="author-info-item-label">被收藏</span>
                </div>
                <div class="author-info-item">
                    <span class="author-info-item-label">{{ collectionsCount }}</span>
                    <span class="author-info-item-label">关注</span>
                </div>
            </div>
            <div class="author-info-actions">
                <el-button class="follow-btn" type="primary" @click="handleFollow">关注</el-button>
            </div>
        </el-popover>
        <!-- <h1 class="post-title">{{ title }}</h1>
        <div class="follow-btn1">
            <el-button round type="primary" @click="handleFollow">关注TA</el-button>
        </div> -->
    </div>
</template>

<script>
export default {
    name: 'AuthorInfo',
    props: {
        author: {
            type: String,
            required: true
        },
        authorAvatar: {
            type: String,
            required: true
        },
        authorRank: {
            type: String,
            required: true
        },
        authorIp: {
            type: String,
            required: true
        },
        likesCount: {
            type: Number,
            required: true
        },
        readsCount: {
            type: Number,
            required: true
        },
        collectionsCount: {
            type: Number,
            required: true
        },
        additionalInfo: {
            type: String,
            default: 'TypeScript爱好者小贝一枚'
        },
        title: {
            type: String,
            required: true
        }
    },
    methods: {
        handleFollow() {
            this.$message({
                message: '关注成功！',
                type: 'success'
            });
        }
    }
}
</script>

<style scoped>
/* 添加您的样式 */
.author-avatar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    /* background: blue; */
    /* padding: 5px; */
}

.author-info-header {
    display: flex;
    gap: 8px;
}

.author-info-footer {
    display: flex;
    justify-content: space-around;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    /* background: #8c8c8c; */
}

.author-info-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 110px;
}

.author-info-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.author-info-item-label {
    font-size: 12px;
    /* font-weight: bold; */
    color: #100d0d;
    display: flex;
    justify-content: center;
}

.author-info-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    /* float: right; */
    gap: 8px;
    height: 40px;
    padding-top: 10px;
}

.follow-btn {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    /* background: rgb(5, 126, 239); */
}

.author-info-body-item {
    font-size: 14px;
    font-weight: bold;
    color: #100d0d;
}

.author-info-body-item1 {
    font-size: 12px;
    /* font-weight: bold; */
    color: #100d0d;
}

.post-title {
    font-size: 20px;
    font-weight: 600;
    width: 100%;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.4;
    /* background: blue; */
}

.post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #8c8c8c;
    font-size: 13px;
}
</style>